{include file="Public:header" /}
<div class="page page-current" id="router1">
	<div class="bar bar-nav">
		<h1 class="title">答题</h1>
		<!--<i class="icon icon-left" onclick="window.history.go(-1);"></i>-->
		<i class="icon icon-left" onclick="window.location.href='{:U('Answer/answer_index')}'"></i>
	</div>
</div>
<style>
	.button-time{display: block;font-weight: bold;width: 90px;height: 30px;text-align: center;background: #ff0000;line-height: 30px;margin: 0 auto 10px;border-radius: 50%;color: #FFF;}
</style>
<div class="page" id='router2'>
	<div class="bar bar-nav">
		<h1 class="title">正式答题</h1>
		<!--<i class="icon icon-left" onclick="window.history.go(-1);"></i>-->
		<i class="icon icon-left" onclick="window.location.href='{:U('Answer/answer_index')}'"></i>
	</div>
	<div class="content answer">
		<div class="content-block answer_top" style="text-indent: 0;">
			<!--<p>“七一”即将到来，按照区委区政府的整体部署，宝安区委组织部号召全区党员开展党章党规微信平台在线知识测试。通过本次活动，希望全区全体党员扎实开展“两学一做”学习教育，以争做合格党员的实际行动纪念建党96周年华诞。关于答题测试说明：本次答题测试中一共设置了20道单选，总分100分，每小题5分，</p>-->
			<p>{$explain['explain']}关于答题说明：本次答题中一共设置了{$explain['formal_num']}道单选，总分{$explain['totalscore']}分，每小题{$explain['score']}分。</p>
			<div class="row answer_txt jq_radio" style="margin: 0.5rem;">
				<span onclick="timedCount()" class="button-time" id="total_time">开始答题</span>
				<h3 class="text-center" style="text-indent: 0;">第<label id="now_id">1</label>/{$explain['formal_num']}题</h3>
				{volist name="answer" id="answer"}
				<div class="div{$i}">
					<div id="answer_{$i}" style="display: none;">
						<dl>
							<dt>{$answer['title']}</dt>
							<dd><label><input type="radio" value="A" class="answer_{$i}"  name="answer_{$i}">A.{$answer['option_a']}</label></dd>
							<dd><label><input type="radio" value="B" class="answer_{$i}" name="answer_{$i}">B.{$answer['option_b']}</label></dd>
							<dd><label><input type="radio" value="C" class="answer_{$i}" name="answer_{$i}">C.{$answer['option_c']}</label></dd>
							<!--<dd><label><input type="radio" name="answer_1">D.以上都不是</label></dd>-->
						</dl>
						<a id="sumbit_{$i}" style="text-indent: 0;margin-top:-15px;" class="button button-fill" onclick="AnswerBtn({$i},'{$answer[exactness]|strtoupper}');">提交</a>
					</div>

					<div id="answer_result_{$i}" class="text-center" style="display: none;">
						<!--<p>你的回答：<font class="red">B  错误</font></p>-->
						<p id="exactness_{$i}">正确答案：<font class="green">{$answer['exactness']|strtoupper}</font></p>

						<a id="next_answer_{$i}" id="submitBtn" onclick="next_answer({$i})" class="button button-fill">下一题</a>
						<a id="reportBtn_{$i}" style="display: none;" class="button button-fill">查看报告</a>
						<!--<a id="reportBtn_{$i}" style="display: none;" href="#router3" class="button button-fill">查看报告</a>-->

						<!--<a href="#router3" style="text-indent: 0;margin-top:0;margin-left:0;display: inline-block;" class="col-40 button button-fill">结束答题</a>-->
						<!--<a onclick="next_answer({$i})" style="text-indent: 0;margin-top:0;margin-right:0;display: inline-block;" class="col-40 button button-fill">下一题</a>-->
					</div>
				</div>
				{/volist}
			</div>
		</div>
	</div>
</div>


<div class="page" id='router3'>
	<div class="bar bar-nav">
		<h1 class="title">答题报告</h1>
		<i class="icon icon-left" onclick="window.location.href='{:U('Answer/answer_index')}'"></i>
	</div>
	<div class="content">

			<div class="row answer_table2 text-center">
				<div class="col-25"><div id="content"><a id="goprize"><i class="iconfont icon-gifts"></i>我要抽奖</a></div></div>
				<div class="col-50">
					<ul>
						<li>总　共<span>{$explain['formal_num']}</span>题</li>
						<li>答　对<span id="true_num">{$last['true_num']}</span>题</li>
						<li>答　错<span id="false_num">{$last['false_num']}</span>题</li>
						<li>总　分<span id="totalscore">{$explain['totalscore']}</span>分</li>
						<li>得　分<span id="total_sorce">{$last['score']}</span>分</li>
						<li>正确率<span id="accuracy">{$last['accuracy']}</span>%</li>
					</ul>
				</div>
				<div class="col-25"><div><a onclick="window.location.href='{:U('Index/index')}'"><i class="iconfont icon-renshu"></i>我要报名</a></div></div>
				<div class="col-100 text-center">
					<span onclick="window.location.href='{:U('Index/index')}'" class="button button-fill">返回首页</span>
					<p>你所在地区为{$baseinfo['province']}{$baseinfo['city']}{$baseinfo['area']}{$baseinfo['school']}</p>
				</div>
			</div>

		<div class="buttons-tab mechan-page-tab " style="margin-top:.5rem;">
			<a href="#tab1" class="tab-link active button">所在地区排名</a>
			<a href="#tab2" class="tab-link button">所在学校排名</a>
		</div>
		<div class="tabs answer_tabs">
			<div id="tab1" class="tab active">
				<p>我在{$baseinfo['area']}排名第{$user_area_order}位，以下仅显示前10名</p>
				<div class="list-block">
					<ul>
						{volist name="areadata" id="areadata"}
						<li class="item-content">
							<span><img src="{$areadata['headimgurl']}" ></span>
							<span style="width: 100px;text-align: center;">{$areadata['nickname']}</span>
							<span>{$areadata['userscore']}分</span><!--{$areadata['min_time']}秒-->
							<span>第{$i}名</span>
						</li>
						{/volist}

						<!--<li class="item-content">
							<span><img src="__PUBLIC__/Home/activity/img//raw_1499150972.jpeg" ></span>
							<span>刘德华</span>
							<span>100分</span>
							<span>第2名</span>
						</li>
						<li class="item-content">
							<span><img src="__PUBLIC__/Home/activity/img//raw_1499150972.jpeg" ></span>
							<span>张三</span>
							<span>100分</span>
							<span>第5名</span>
						</li>-->
					</ul>
				</div>
			</div>

			<div id="tab2" class="tab">
				<p>我在{$baseinfo['school']}排名第{$user_school_order}位，以下仅显示前10名</p>
				<div class="list-block">
					<ul>
						{volist name="schooldata" id="schooldata"}
						<li class="item-content">
							<span><img src="{$schooldata['headimgurl']}" ></span>
							<span style="width: 100px;text-align: center;">{$schooldata['nickname']}</span>
							<span>{$schooldata['userscore']}分</span>
							<span>第{$i}名</span>
						</li>
						{/volist}
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>



<script type="text/javascript" src="http://g.alicdn.com/sj/lib/jquery/dist/jquery.min.js"></script>
<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>

<!--城市选择结束-->
<script type="text/javascript" src="__PUBLIC__/Home/activity/js/huodon.js" ></script>
<script>
    jQuery(document).ready(function(){
        $(".jq_radio label").on("click",function(){
            $(".jq_radio dd").removeClass("active");
            $(this).parent().addClass("active");
        });
    });
</script>
</body>
</html>
<link rel="stylesheet" href="__PUBLIC__/Home/layer_mobile/need/layer.css"/>
<script type="text/javascript" src="__PUBLIC__/Home/layer_mobile/layer.js"></script>

<script>
    $(document).ready(function () {
        $("#answer_1").show();
    });

    var c=0;
    var t;
    var start=0;
    function timedCount()
    {
        start = 1;
        $('.button-time').css('font-size','16px');
        $('.button-time').text(c+' 秒');
        c=(c+1);
        t=setTimeout("timedCount()",1000);
    }

    var true_num = 0;
    var false_num = 0;
    var total = {$explain['formal_num']};//答题数
    var every_sorce = {$explain['score']};//每题成绩


    //提交答案
    function AnswerBtn(id_num,exactness){
        if(start != 1)
		{
            message('请点击上方开始按钮后答题！');
		    return false;
		}
        // Zepto.toast('回答错误', 2345, 'success top');
        var id_str = "#answer_result_"+id_num;//结果容器
        var choose = $(".active .answer_"+id_num).val();//选中答案
        if (choose == undefined)
        {
            message('请选择答案后提交');
            return false;
        }
        if(choose == exactness)
        {
            //答对
            $("#exactness_"+id_num).hide();
            var html = "<p  style='margin-top:-20px;'>你的回答：<font class='green'>"+choose+' '+"正确</font></p>"
            $(id_str).prepend(html);
            true_num++;
        }else
        {
            //答错
            var html = "<p  style='margin-top:-20px;'>你的回答：<font class='red'>"+choose+' '+"错误</font></p>"
            $(id_str).prepend(html);
            false_num++;
        }

        //报告
        if(false_num == 0)
        {
            var accuracy=100;
        }
        else
        {

            if(true_num !=0)
                var accuracy = ((true_num/total).toFixed(2)*100);
            else
                var accuracy = 0;
        }

        var total_sorce = (true_num*every_sorce);//得分
        $("#accuracy").text(accuracy);//正确率
        $("#true_num").text(true_num);
        $("#false_num").text(false_num);
        $("#total_sorce").text(total_sorce);

        //alert(true_num)

        //禁用
        $(".jq_radio label").unbind();
        $("#sumbit_"+id_num).css('display','none');

        //$(id_str).show();
		//是否最后一题
        if((true_num+false_num) < total)
        	$(id_str).show();
        else if((true_num+false_num) == total)
		{
            //message('已经是最后一题了！');
            //提交生成
            $(id_str).show();
            $("#next_answer_"+id_num).hide();//隐藏下一题按扭
            $("#reportBtn_"+id_num).css('display','block');
			//window.location.href="#router3";
		}
    }


    //下一题
    function next_answer(next_id) {
        //绑回选择事件
        $(".jq_radio label").bind('click',
            function(){
                $(".jq_radio dd").removeClass("active");
                $(this).parent().addClass("active");
            });
        //隐藏上一题
        $(".div"+next_id).css('display','none');
        //显示下一题
        var now_id = ++next_id;
        $("#now_id").html(now_id);
        $("#answer_"+now_id).show();

    }

    //提示
    function message(msg) {
        layer.open({
            content: msg,
            skin: 'msg',
            time: 2 //2秒后自动关闭
        });
    }

    //更新开始答题时间
	$("#total_time").click(function () {
        $.ajax({
            type : "GET",
            url: "{:U('update_answer_time')}",//+tab,
            dataType : 'json',
            success : function (data) {
                if(data.status == 1)
                    return true;
                else
                    return false;
            }
        })
    })

	var gopricesorce = {$explain['gopricesocre']};//满足去抽奖分数

    //报告信息
    totalsorce= 0;
	$("#reportBtn_"+total).click(function () {
        //var truenum = $("#true_num").text();
        //var falsenum = $("#false_num").text();
        totalsorce = $("#total_sorce").text();
        //var accuracy = $("#accuracy").text();
        var total_time = $("#total_time").text();
		$.ajax({
		    type : "POST",
            url: "{:U('report')}",//+tab,
			data : {'score':totalsorce,'total_time':total_time},
			dataType : 'json',
            async : false,
			success : function (data) {
		        if(data.status == 1)
				{
				    if(totalsorce < gopricesorce)
					    $("#content").html('<a href="{:U('Answer/answer_index')}"><i class="iconfont icon-edit"></i>再来一次</a>');

				    window.location.href = data.url;
                    //return true;
                }
		        else
		            return false;
            }
		})
    });

	//抽奖
	$("#goprize").click(function () {
        //var totalsorce = $("#total_sorce").text();
        $.ajax({
            type : "POST",
            url: "{:U('PrizeDraw/index')}",//+tab,
            data : {'score':totalsorce},
            dataType : 'json',
            success : function (data) {
                if(data.status == 1)
                {
					window.location.href = data.url;
                }
                else
				{
                    message(data.message);
                    return false;
                }
            }
        })
    });
</script>